<!--
 * @Author: 小花
 * @Date: 2022-01-18 20:06:31
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-14 22:56:17
 * @Description: 
-->
<template>
  <div class="wxScanLogin_container">
    <!-- 主体 -->
    <div class="mark">
      <div class="systemTitle">后勤报修系统</div>
      <div class="body">
        <!-- 标题 -->
        <div class="wxLoginText">微信登录</div>

        <!-- 核心二维码 -->
        <el-button type="success" class="loginBtnStyle" @click="triggerLogin" v-if="!wxLoginImgSrc">
          <i class="fa fa-weixin"></i> 登录
        </el-button>
        <elImage v-else :src="wxLoginImgSrc"></elImage>

        <!-- 动态信息显示 -->
        <div class="wxLoginInfo" v-show="set_wxLoginInfo==1">
          <div>请使用微信扫描二维码登录<br />“公众平台测试账号系统”</div>
        </div>
        <div class="wxLoginInfo" v-show="set_wxLoginInfo==2">
          <div class="animate__animated animate__fadeInDown">
            <el-image style="width: 2.8rem;" :src="img.loginSuccess" />
            <span> {{wxLoginInfo}} </span>
          </div>
        </div>
        <div class="wxLoginInfo" v-show="set_wxLoginInfo==3">
          <div class="animate__animated animate__fadeInDown">
            <el-image style="width: 2.8rem;" :src="img.loginSuccess" />
            <span> {{wxLoginInfo}} </span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import conn_webSocket from '@/js/webSocket'
import elImage from '@/public/el-image/el-image.vue'
import { saveLoginInfo, setQps, getQps } from '@/js/public'
import loginSuccess from '@/assets/images/loginSuccess.webp'
import correct from '@/assets/images/correct.webp'

export default {
  components: {
    elImage
  },
  data () {
    //这里存放数据
    return {
      img: {
        correct,
        loginSuccess
      },
      wxLoginImgSrc: '',
      webSocket: null,
      wxLoginInfo: '',
      form: {
        resource: ''
      }
    };

  },
  //监听属性 类似于data概念
  computed: {
    set_wxLoginInfo () {
      if (this.wxLoginInfo == '' || this.wxLoginInfo == '请求成功') return 1;
      if (this.wxLoginInfo == '扫码成功') return 2;
      if (this.wxLoginInfo == '登录成功') return 3;
    }
  },
  //监控data中的数据变化
  watch: {
  },
  //方法集合
  methods: {
    /**
     * @description: 登录按钮事件
     * @param {*}
     * @return {*}
     * @author: 小花
     */
    triggerLogin () {
      this.webSocket = conn_webSocket('login');

      this.webSocket.onopen = () => {
        console.log("WebSocket连接成功");
      }
      this.webSocket.onmessage = event => {
        let res = JSON.parse(event.data);
        console.log(res);
        switch (res.code) {
          case 43000:
            // 登录二维码
            this.loginPageStyle(res);
            break;
          case 43007:
            // 新用户类型选择页面
            this.toNewUserPage(res);
            break;
          case 43010:
            // 登录成功
            saveLoginInfo(res.data)
            this.loginPageStyle(res);
            setTimeout(() => {
              this.$router.replace({ name: res.data.loginType })
              this.webSocket.close();
            }, 1000);
            break;
          default:
            break;
        }

      }
      this.webSocket.onclose = (e) => {
        console.log("WebSocket连接关闭");
        this.wxLoginImgSrc = '';
      }
      this.webSocket.onerror = (e) => {
        console.log("WebSocket连接失败");
      }
    },
    /**
     * @description: 登录页面样式控制 43000
     * @param {*} res
     * @return {*}
     * @author: 小花
     */
    loginPageStyle (res) {
      switch (res.msg) {
        case "请求成功":
          this.wxLoginInfo = res.msg;
          this.wxLoginImgSrc = res.data;
          break;
        case "扫码成功":
          this.wxLoginInfo = res.msg;
          break;
        case "登录成功":
          this.wxLoginImgSrc = this.img.correct
          this.wxLoginInfo = res.msg;
          break;
        default:
          break;
      }
    },
    /**
     * @description: 跳转新用户页面
     * @param {*}
     * @return {*}
     * @author: 小花
     */
    toNewUserPage (res) {
      this.$router.push({
        name: 'newUser',
        params: {
          code: res.code,
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
  }
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
@import url('animate.css');
@import '@/assets/scss/loginBtnStyle.scss';

.wxScanLogin_container {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  height: 100vh;
  background: url('@/assets/images/login-background.webp') no-repeat; /*图片路径*/
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

  .systemTitle {
    font-size: 3rem;
    z-index: 1;
    letter-spacing: 4rem;
    text-indent: 4rem;
    color: black;
    padding-bottom: 3rem;
    text-shadow: 2px 1px 2px black;
  }

  .mark {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(50px);
    overflow: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .body {
    width: 300px;
    height: 285px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.6rem;
    box-shadow: 0px 0px 5px 2px rgb(112 111 111 / 20%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    backdrop-filter: blur(6px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    .wxLoginText {
      color: green;
      padding: 1rem 0;
      font-size: 1.2rem;
      letter-spacing: 2rem;
      text-indent: 2rem;
    }
    .wxLoginInfo {
      width: 13rem;
      height: 2rem;
      margin: 12px;
      box-shadow: inset 3px 3px 2px 0px black, inset -1px -1px 2px 0px #f2f6fc;
      backdrop-filter: blur(6px);
      border-radius: 30px;
      padding: 10px 20px;
      font-size: 13px;
      display: flex;
      justify-content: center;
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    }
  }
}
</style>
